<template>
  <div class="commodity_library">
    <search-table :url="url" ref="searchtable" :columns="columns" :form="form" v-if="isShowTable">
      <template slot="searchForm">
        <a-form layout="inline" :form="form">
          <a-form-item label="商品名称">
            <a-input
              style="width:180px"
              v-decorator="[
                'goodsName',
              ]"
              placeholder="请输入商品名称"
            >
            </a-input>
          </a-form-item>
          <a-form-item label="商品分类">
            <a-tree-select
              allowClear
              style="width:180px"
              :replaceFields="{children:'children', title:'classifyName', key:'id', value: 'id' }"
              v-decorator="[
                'goodsClassificationId',
              ]"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              :tree-data="productClassifyList"
              placeholder="请选择"
              tree-default-expand-all
              >
              <span slot="title" slot-scope="{ key, value }">
                  {{ value }}
              </span>
            </a-tree-select>
          </a-form-item>
          <!-- <a-form-item label="商品品牌">
              <a-tree-select
                allowClear
                style="width:180px"
                :replaceFields="{children:'children', title:'makeName', key:'id', value: 'id' }"
                v-decorator="[
                  'goodsBrandId',
                ]"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                :tree-data="productCategoryList"
                placeholder="请选择"
                tree-default-expand-all
                >
                <span slot="title" slot-scope="{ key, value }">
                    {{ value }}
                </span>
            </a-tree-select>
          </a-form-item> -->
          <!-- <a-form-item label="首选供应商">
            <a-select style="width: 180px" v-decorator="[
                'deliveryWarehouseId',
              ]" :allowClear="true" placeholder="请选择" :options="productNameList"></a-select>
          </a-form-item> -->
          <!-- <a-form-item label="库存类型">
            <a-select style="width: 180px" v-decorator="[
                'goodsUnitCode',
              ]" :allowClear="true" placeholder="全部" :options="inventoryTypeList"></a-select>
          </a-form-item> -->
          <a-form-item label="商品类目">
            <a-tree-select
                allowClear
                style="width:180px"
                :replaceFields="{children:'children', title:'categoryName', key:'id', value: 'id' }"
                v-decorator="[
                  'goodsCategoryId',
                ]"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                :tree-data="productCategoryList"
                placeholder="请选择"
                tree-default-expand-all
                >
                <span slot="title" slot-scope="{ key, value }">
                    {{ value }}
                </span>
            </a-tree-select>
          </a-form-item>
        </a-form>
      </template>
      <template slot="oprationRow">
        <permission authority="goods:repository:add" v-if="shopType==1">
          <a-button type="primary" icon="plus" @click="newProduct()">新增商品</a-button>
        </permission>
        <permission authority="goods:repository:add" v-if="shopType==2">
          <a-button type="primary" @click="introduceShow=true">商品引入</a-button>
        </permission>
        <permission authority="goods:repository:delete">
          <a-button @click="deleteRows($refs.searchtable.selectedRowKeys)">删除</a-button>
        </permission>
      </template>
      <template slot="tableOperation" slot-scope="{record}">
        <a-space>
          <permission authority="goods:repository:modify">
            <a href="javascript:;" class="text-primary pointer" @click="newProduct(record.id)">编辑</a>
          </permission>
          <permission authority="goods:repository:delete">
            <a href="javascript:;" class="text-primary text-danger" @click="deleteRows([record.id])">删除</a>
          </permission>
          <permission authority="goods:repository:add" v-if="shopType==1">
            <a href="javascript:;" class="text-primary text-danger" @click="publishToStore(record)">发到门店</a>
          </permission>
        </a-space>
      </template>
    </search-table>
    <ShopList :visible="shopShow" :shopIds="shopIds" @cancel="shopShow=false;" @submit="handleShopSubmit"></ShopList>
    <ProductIntroduce :visible="introduceShow" @cancel="handleIntroduceCancel"></ProductIntroduce>
  </div>
</template>
<script>
//import AddEditProduct from './components/AddEditProduct';
import ShopList from '@/components/ShopList/ShopList';
import ProductIntroduce from './components/ProductIntroduce';

export default {
  name: 'ProductCommodityManageCommodityLibrary',
  components:{
    ShopList,
    ProductIntroduce,
    //AddEditProduct
  },
  computed:{
    userInfo(){
      return this.$store.getters.userInfo || {};
    },
    shopId(){
      return this.userInfo.shopId || '';
    },
    shopType(){
      let shopType=this.$route.query.shopType;
      if(shopType){
        return shopType;
      }
      if(this.userInfo.shopRoleCode=='role:store:main'){
        return 1;
      }
      else if(this.userInfo.shopRoleCode=='role:store:branch'){
        return 2;
      }
      else if(this.userInfo.shopRoleCode=='role:supplier'){
        return 3;
      }
    }//:1,//总店1；分店2；供应商3
  },
  data(){
    return {
      url:'/goods/repository/page',
      productNameList:[
        {
          label:'测试',
          value:1
        },{
          label:'测试2',
          value:2
        }
      ],
      form: this.$form.createForm(this, { name: 'table_search' }),
      columns: [
        {
          title: '商品名称',
          dataIndex: 'goodsName',
          key: 'goodsName',
          align: 'center',
          // customRender: (text, row) => {
          //   console.log('text', text)
          //   return <table-img src={text}/>
          // }
          customRender: (text, row) => {
            console.log('text', text)
            return <div class="product_td"><table-img src={row.goodsPicture}/><div class="product_name">{text}</div></div>
          }
        },
        {
          title: '商品分类',
          dataIndex: 'goodsClassificationName',
          key: 'goodsClassificationName',          
        },
        // {
        //   title: '品牌',
        //   dataIndex: 'goodsBrandName',
        //   key: 'goodsBrandName'
        // },
        // {
        //   title: '销售渠道',
        //   dataIndex: 'a',
        //   key: 'a'
        // },
        {
          title: '库存数量',
          dataIndex: 'goodsInventory',
          key: 'goodsInventory',
          customRender: (text, row) => {
            return text || 0;
          }
        },
        {
          title: '商品类目',
          dataIndex: 'goodsCategoryName',
          key: 'goodsCategoryName'
        },
        // {
        //   title: '生命周期',
        //   dataIndex: 'd',
        //   key: 'd'
        // },
        {
          title: '创建时间',
          dataIndex: 'createDate',
          key: 'createDate'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' }
        },
      ],
      //商品分类列表
      productClassifyList:[],
      //商品品牌列表
      productBrandList:[],
      //库存类型
      inventoryTypeList:[
        {
          value:1,
          label:'件'
        }
      ],
      //商品类目
      productCategoryList:[],
      //选择店铺
      shopShow:false,
      introduceShow:false,
      commodityId:'',
      shopIds:[],
      isShowTable:true,
    }
  },
  created(){
    this.getProductClassify();//分类
    this.getProductGroup();//分组
    this.getProductCategory();//类目
    console.log('this.shopType',this.shopType);
  },
  methods:{
    //商品引入
    handleIntroduceCancel(){
      this.isShowTable=false;
      this.introduceShow=false;
      setTimeout(()=>{
        this.isShowTable=true;
      },100);
    },
    //发布到门店
    async handleShopSubmit(shopIds){
      let res=await this.$post('/goods/repository/release',{
        shopIdList:shopIds,
        id:this.commodityId
      })
      if(res && res.returnCode=='1000'){
        this.shopShow=false;
        this.commodityId='';
        this.$message.success('发布成功！');
      }
    },
    //商品分类
    async getProductClassify(){
      let res=await this.$get('/goods/classify/tree',{
        shopId:this.userInfo.shopId || ''
      });
      if(res && res.returnCode=='1000'){
        this.productClassifyList=res.dataInfo || [];
      }
      else {
        this.productClassifyList=[];
      }
    },
    //商品分组
    async getProductGroup(){
      let res=await this.$get('/goods/group/tree',{
        shopId:this.userInfo.shopId || ''
      },false,true);
      if(res && res.returnCode=='1000'){
        this.productGroupList=res.dataInfo || [];
      }
      else {
        this.productGroupList=[];
      }
    },
    //商品品牌列表
    async getProductBrand(){
      let res=await this.$get('/goods/make/tree',{
        shopId:this.userInfo.shopId || ''
      },false,true)
      if(res && res.returnCode=='1000'){
        this.productBrandList=res.dataInfo||[];
      }
      else {
        this.productBrandList=[];
      }
    },
    //商品类目
    async getProductCategory(){
      let res=await this.$get('/goods/category/tree',{
        categoryStatus:1
      },false,true);
      if(res && res.returnCode=='1000'){
        this.productCategoryList=res.dataInfo || [];
      }
      else {
        this.productCategoryList=[];
      }
    },

    //新增/编辑商品库
    newProduct(id){
      let params={};
      if(id){//修改
        params={
          id
        };
      }
      this.$router.push({
        name:'ProductCommodityManageCommodityLibraryAddEditProduct',
        query:params
      })
    },
    //发布到门店
    async publishToStore(record){
      console.log(record.id);
      let res=await this.$get('/goods/repository/query',{
        id:record.id
      },false,true);
      //res={"returnCode":1000,"message":"成功","dataInfo":{"id":"439192797442998276","createBy":"430708737678770176","updateBy":"430708737678770176","createDate":"2021-06-23 20:48:21","updateDate":"2021-06-23 20:48:21","sort":0,"remark":null,"deleted":0,"current":1,"size":10,"sourceGoodsId":"439112207549071360","shopId":"433755719372636160","goodsType":"2","goodsCreateType":1,"goodsName":"44","goodsCode":"20210623032806856","goodsBrandId":null,"goodsClassificationId":"439102633647538176","goodsCategoryId":"437277647236497408","goodsSellingPoint":"444","goodsPictures":"https://testsd.cicd.vpclub.cn/ghs/20210623/2021062315275641.png","goodsVideo":"","goodsUnitCode":"1","shareDescription":"","virtualSales":444444444,"goodsModel":1,"goodsWarningNumber":444,"deliveryWarehouseId":"439112016452386816","deliveryMode":"1,2","goodsDetails":"","shopIdList":["433755719372636160","433758658703130624"],"goodsSpecList":[]},"success":true,"successAndNotEmptyCollection":false,"nullData":false,"emptyCollection":true,"successAndNotNullData":true}
      if(res && res.returnCode=='1000'){
        this.shopIds=(res.dataInfo||{}).shopIdList || [];        
        this.commodityId=record.id;
        this.shopShow=true;
      }
    },
    //删除
    deleteRows(ids){
      console.log(ids)
      if (!ids || ids.length === 0) return this.$message.warn('请先选择一项后再进行操作')
      this.$confirm({
        title: '删除提示',
        content: '删除操作不可恢复，请确认是否删除？',
        okText: '确认删除',
        cancelText: '取消',
        onOk: () => {
          this.$post('/goods/repository/delete', { ids }).then(res => {
            if (res && res.returnCode == 1000) {
              this.$message.success('删除成功')
              this.$refs.searchtable.refreshTable()
            }
          })
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/less" lang="less" scoped>
/deep/ .anticon-exclamation-circle {
  display: none !important;
}
</style>